<template>
  <div id="staff-detail">
    <a-spin :spinning="currentStaff.value==undefined">

      <div v-if="currentStaff.value">
        <table>
          <tr>
            <td class="field-name"><span>姓名:</span></td>
            <td>{{currentStaff.value.name}}</td>
          </tr>
          <tr>
            <td class="field-name"><span>性别:</span></td>
            <td>{{t(`enums.gender.${currentStaff.value.gender}`)}}</td>
          </tr>
          <tr>
            <td class="field-name"><span>邮箱:</span></td>
            <td>{{currentStaff.value.email}}</td>
          </tr>
          <tr>
            <td class="field-name"><span>手机:</span></td>
            <td>{{currentStaff.value.phone}}</td>
          </tr>
          <tr>
            <td class="field-name"><span>地址:</span></td>
            <td>{{currentStaff.value.address}}</td>
          </tr>
          <tr>
            <td class="field-name"><span>状态:</span></td>
            <td>
              <a-select
                v-model:value="currentStaff.value.state"
                style="width: 120px"
              >
                <a-select-option value="OK">{{t('enums.staffState.OK')}}</a-select-option>
                <a-select-option value="RESIGNED">{{t('enums.staffState.RESIGNED')}}</a-select-option>
                <a-select-option value="LEAVING">{{t('enums.staffState.LEAVING')}}</a-select-option>
              </a-select>
            </td>
          </tr>
          <tr>
            <td class="field-name"><span>备注:</span></td>
            <td><a-input v-model:value="currentStaff.value.note"></a-input></td>
          </tr>
          <tr>
            <td class="field-name"><span>账号:</span></td>
            <td>
              <a-tag color="pink">{{currentStaff.value.account.username}}</a-tag>
              <a-tag :color="currentStaff.value.account.state == 'OK'? 'green': 'red'">账号状态-{{currentStaff.value.account.state}}</a-tag>
            </td>
          </tr>

          <tr>
            <td class="field-name"><span>部门:</span></td>
            <td><a-tag color="blue">{{currentStaff.value.department.name}}</a-tag></td>
          </tr>

        </table>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>

import { watch } from 'vue'
const prop = defineProps({
  currentStaff: {
    type: Object
  },
  t: {
    type: Function
  }
});

</script>

<style scoped>

.field-name {
  text-align: right;
  padding-right: 20px;
}
#staff-detail {
  padding-top: 20px;
}
</style>